<template>
    <el-form
        ref="ruleFormRef"
        label-position="top"
        :model="item"
        :inline="true"
        :hide-required-asterisk="true"
        class="formList"
        :rules="rules"
    >
        <div class="title">
            <h3>{{ optionInfo.alias[signType] }}{{ index ? index : '' }}</h3>
            <span v-if="!item.id" @click="onDelItem(index)">删除</span>
        </div>
        <el-form-item label="媒体编码" prop="machineNum">
            <el-input v-model="item.machineNum" maxlength="30" :disabled="item.id && type !== 'edit'" />
        </el-form-item>
        <el-form-item v-if="+signType === 1 || +signType === 2" label="型号/尺寸" prop="devId">
            <el-select v-model="item.devId" filterable placeholder="请选择" :disabled="item.id && type !== 'edit'">
                <el-option
                    v-for="item in commonList.pointModelList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                />
            </el-select>
        </el-form-item>
        <el-form-item v-if="+signType !== 1 && +signType !== 2" label="型号/尺寸" prop="mediaSize">
            <el-select v-model="item.mediaSize" filterable placeholder="请选择" :disabled="item.id && type !== 'edit'">
                <el-option v-for="item in commonList.sizeList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
        </el-form-item>
        <el-form-item v-if="+signType !== 1 && +signType !== 2" label="版位位置" prop="installPosition">
            <el-select
                v-model="item.installPosition"
                filterable
                placeholder="请选择"
                :disabled="item.id && type !== 'edit'"
            >
                <el-option
                    v-for="item in commonList.installPositionList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                />
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="道闸类型" v-if="+signType === 6">
           <el-select v-model="item.subType" filterable placeholder="请选择" :disabled="item.id&&type!=='edit'">
            <el-option
            v-for="item in commonList.barrierList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
            />
        </el-select>

    </el-form-item> -->
        <el-form-item v-if="+signType === 4 || +signType === 3" label="公益位" prop="commonwealFlag">
            <el-select
                v-model="item.commonwealFlag"
                filterable
                placeholder="请选择"
                :disabled="item.id && type !== 'edit'"
            >
                <el-option v-for="item in optionsWealFlag" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item v-if="+signType === 3" label="有无护板" prop="backplate">
            <el-select v-model="item.backplate" filterable placeholder="请选择" :disabled="item.id && type !== 'edit'">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>

        <!-- <el-form-item label="门禁类型" v-if="+signType === 5">
           <el-select v-model="item.subType" filterable placeholder="请选择" :disabled="item.id&&type!=='edit'">
            <el-option
            v-for="item in commonList.gaiingList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
            />
        </el-select>

    </el-form-item> -->
        <el-form-item v-if="+signType === 1 || +signType === 2" label="点位状态" prop="status">
            <el-select
                v-model="item.status"
                filterable
                placeholder="请选择"
                :disabled="item.id && type !== 'edit'"
                @change="onChangeStatus"
            >
                <el-option
                    v-for="item in commonList.pointStatusList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                />
            </el-select>
        </el-form-item>
        <el-form-item v-if="+signType !== 1 && +signType !== 2" label="点位状态" prop="mediaState">
            <el-select
                v-model="item.mediaState"
                filterable
                placeholder="请选择"
                :disabled="item.id && type !== 'edit'"
                @change="onChangeStatus"
            >
                <el-option
                    v-for="item in commonList.pointStatusList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                />
            </el-select>
        </el-form-item>
        <el-form-item
            v-if="
                ((+signType === 1 || +signType === 2) && +item.status === 5) ||
                (+signType !== 1 && +signType !== 2 && +item.mediaState === 5)
            "
            label="维护原因"
            prop="fixReason"
        >
            <el-select v-model="item.fixReason" filterable placeholder="请选择" :disabled="item.id && type !== 'edit'">
                <el-option
                    v-for="item in commonList.screenFixReasonList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                />
            </el-select>
        </el-form-item>
        <el-form-item
            v-if="
                ((+signType === 1 || +signType === 2) && +item.status === 6) ||
                (+signType !== 1 && +signType !== 2 && +item.mediaState === 6)
            "
            label="下架原因"
            prop="reReason"
        >
            <el-select v-model="item.reReason" filterable placeholder="请选择" :disabled="item.id && type !== 'edit'">
                <el-option
                    v-for="item in commonList.screenReReasonList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="点位编码" prop="pointNum">
            <el-input v-model="item.pointNum" maxlength="30" :disabled="item.id" />
        </el-form-item>
        <el-form-item v-if="+signType === 2 || +signType === 1" label="是否联网" prop="network">
            <el-select v-model="item.network" filterable placeholder="请选择" :disabled="item.id && type !== 'edit'">
                <el-option
                    v-for="item in commonList.networkList"
                    :key="+item.code"
                    :label="item.name"
                    :value="+item.code"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="禁忌行业" prop="tabooIndustryList">
            <el-select
                v-model="item.tabooIndustryList"
                multiple
                filterable
                collapse-tags
                clearable
                placeholder="请选择"
                :disabled="item.id && type !== 'edit'"
            >
                <el-option
                    v-for="item in commonList.industryList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                />
            </el-select>
        </el-form-item>

        <el-form-item  v-if="pointType==='out'" label="楼层" prop="floor" >
            <el-input v-model="item.floor" maxlength="30" :disabled="item.id && type !== 'edit'"/>
        </el-form-item>
        
    </el-form>
</template>

<script lang="ts" setup>
import { reactive, computed, ref, defineExpose, defineEmits, defineProps, nextTick } from 'vue';
import { useStore } from 'vuex';
import { PointData } from './pointType';
import type { FormRules, FormInstance } from 'element-plus';

const store = useStore();
const ruleFormRef: any = ref<FormInstance>();
const options = [
    { label: '有', value: 1 },
    { label: '无', value: 0 },
];
const optionsWealFlag = [
    { label: '是', value: 1 },
    { label: '否', value: 0 },
];
const emits = defineEmits(['onDelItem']);

const optionInfo = reactive(new PointData());

const rules: any = reactive<FormRules>({
    machineNum: [
        { required: true, message: '媒体编码不能为空', trigger: 'blur' },
        { max: 30, message: '媒体编码最多可输入30个字符', trigger: 'blur' },
    ],
    devId: [{ required: true, message: '型号/尺寸不能为空', trigger: 'change' }],
    mediaSize: [{ required: true, message: '型号/尺寸不能为空', trigger: 'change' }],
    pointNum: [
        { required: true, message: '点位编码不能为空', trigger: 'blur' },
        { max: 30, message: '点位编码最多可输入30个字符', trigger: 'blur' },
        { pattern: /^[0-9a-zA-Z-]{1,}$/, required: true, message: '只支持字母数字或 - ', trigger: 'blur' }
    ],
    installPosition: [{ required: true, message: '版位位置不能为空', trigger: 'change' }],
    commonwealFlag: [{ required: true, message: '是否公益位不能为空', trigger: 'change' }],
    backplate: [{ required: true, message: '有无护板不能为空', trigger: 'change' }],
    status: [{ required: true, message: '点位状态不能为空', trigger: 'change' }],
    mediaState: [{ required: true, message: '点位状态不能为空', trigger: 'change' }],
    fixReason: [{ required: true, message: '维修原因不能为空', trigger: 'change' }],
    reReason: [{ required: true, message: '下架原因不能为空', trigger: 'change' }],
    network: [{ required: true, message: '是否联网不能为空', trigger: 'change' }],
    floor:[{ required: true, message: '楼层不能为空', trigger: 'blur' }],
    
});

const props = defineProps({
    item: {
        type: Object,
        default: () => {},
    },
    signType: {
        type: [String, Number],
        default: '',
    },
    index: {
        type: Number,
        default: 0,
    },
    type: {
        type: String,
        default: '',
    },
    pointType:{
        type: String,
        default: '',
    }
});
const commonList: any = computed(() => store.state.app.common.CommonList);
const status = ref(0);

const onDelItem = (): void => {
    emits('onDelItem');
};
const onChangeStatus = (value: any) => {
    status.value = +value;
    props.item.fixReason = '';
    props.item.reReason = '';
    // element-plus2.1.2版本的影响会校验隐藏的字段重写校验规则
    // if (status.value === 4) {
    //     rules.fixReason[0].required = false;
    //     rules.reReason[0].required = false;
    // } else if (status.value === 5) {
    //     rules.fixReason[0].required = true;
    //     rules.reReason[0].required = false;
    // } else if (status.value === 6) {
    //     rules.reReason[0].required = true;
    //     rules.fixReason[0].required = false;
    // }
};
const submitForm = () => {
    if (!ruleFormRef.value) {
        return;
    }
    console.log(rules);

    return new Promise((resolve, reject) => {
        ruleFormRef.value.validate((valid: any, validateFieldsError: any) => {
            console.log(validateFieldsError);
            console.log(valid);
            if (valid) {
                resolve(true);
            } else {
                console.log('error submit!');
                reject(new Error('请完善信息！'));
            }
        });
    });
};

// 对外暴露可执行方法
defineExpose({
    submitForm,
});
</script>

<style lang="scss" scoped>
.formList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: center;
        h3 {
            width: 100%;
            font-size: 16px;
            color: #333333;
            margin: 16px 0 16px 0;
        }
        span {
            font-size: 16px;
            color: #e60044;
            width: 50px;
            display: inline-block;
            margin-top: 15px;
            cursor: pointer;
        }
    }
    :deep(.el-form-item__content) {
        width: 260px;
    }
    :deep(.el-form-item) {
        margin-right: 0;
    }
    :deep(.el-form-item__content .el-input__inner) {
        //height: 36px !important;
    }
    :deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
        width: 260px;
    }
    :deep(.el-form-item.is-required > .el-form-item__label::after) {
        content: '*';
        color: var(--el-color-danger);
        margin-left: 3px;
    }
}
</style>
